<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #b1{
            position: fixed;
        }
        #b2{
            position: fixed;
            right: 400px;
        }
    </style>
    <script>
        var times;
        function f1(){
         times= setTimeout(function(){   //----将返回值赋值给一个变量以便后续清楚计时器
            console.log('5418');
            
          },2000)
        }
        // setTimeout()设置一次性计时器，在指定毫秒后执行某个函数
        setTimeout(function(){
            alert('555')

        }, 3000)
        setTimeout(f1,2000)//此处不加小括号，加括号会立即调用函数并执行


        // setinterval()设置周期定时器，周期性循环执行某个函数
        var too;
        function f2() {
           too = setInterval(function () {
                console.log('过去了1秒');
            }, 1000)
        }


        // clearTimeout（）清楚一次性计时器
        function f3(){
            clearTimeout(times);
        }

        // clearInterval()清楚周期计时器
        function f4(){
            clearInterval(too)
        }


        // scrollTo()将内容滚动到指定的坐标，即设置滚动条的偏移位置
        function f5(){
            scrollTo(0,200)//第一个参数为水平方向的位置，第二个参数为垂直方向，默认单位为px（无需添加单位）
        }

        // scrollBy()将内容滚动指定的像素，即设置滚动条的偏移量
        function f6(){
            scrollBy(0,200)
        }


        实现页面间隔一定时间自动向下滚动
        function f6(){
            setInterval(function(){
                scrollBy(0,10)
            },10)
        }
    </script>
</head>

<body>
    <button onclick="f1();">一次性计时器</button>
    <button onclick="f2();">周期计时器</button>
    <button onclick="f3();">清楚一次性计时器</button>
    <button onclick="f4();">清楚周期性计时器</button>
    <button onclick="f5();" id="b1">将内容滚到指定坐标</button>
    <button onclick="f6();" id="b2">滚动指定的像素数（偏移量）</button>
    <hr>



    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <p>p4</p>
    <p>p5</p>
    <p>p6</p>
    <p>p7</p>
    <p>p8</p>
    <p>p9</p>
    <p>p10</p>
    <p>p11</p>
    <p>p12</p>
    <p>p13</p>
    <p>p14</p>
    <p>p15</p>
    <p>p16</p>
    <p>p17</p>
    <p>p18</p>
    <p>p19</p>
    <p>p20</p>
    <p>p21</p>
    <p>p22</p>
    <p>p23</p>
    <p>p24</p>
    <p>p25</p>
    <p>p26</p>
    <p>p27</p>
    <p>p28</p>
    <p>p29</p>
    <p>p30</p>
    <p>p31</p>
    <p>p32</p>
    <p>p33</p>
    <p>p34</p>
    <p>p35</p>
    <p>p36</p>
    <p>p37</p>
    <p>p38</p>
    <p>p39</p>
    <p>p40</p>
    <p>p41</p>
    <p>p42</p>
    <p>p43</p>
    <p>p44</p>
    <p>p45</p>
    <p>p46</p>
    <p>p47</p>
    <p>p48</p>
    <p>p49</p>
    <p>p50</p>
    <p>p51</p>
    <p>p52</p>
    <p>p53</p>
    <p>p54</p>
    <p>p55</p>
    <p>p56</p>
    <p>p57</p>
    <p>p58</p>
    <p>p59</p>
    <p>p60</p>
    <p>p61</p>
    <p>p62</p>
    <p>p63</p>
    <p>p64</p>
    <p>p65</p>
    <p>p66</p>
    <p>p67</p>
    <p>p68</p>
    <p>p69</p>
    <p>p70</p>
    <p>p71</p>
    <p>p72</p>
    <p>p73</p>
    <p>p74</p>
    <p>p75</p>
    <p>p76</p>
    <p>p77</p>
    <p>p78</p>
    <p>p79</p>
    <p>p80</p>
    <p>p81</p>
    <p>p82</p>
    <p>p83</p>
    <p>p84</p>
    <p>p85</p>
    <p>p86</p>
    <p>p87</p>
    <p>p88</p>
    <p>p89</p>
    <p>p90</p>
    <p>p91</p>
    <p>p92</p>
    <p>p93</p>
    <p>p94</p>
    <p>p95</p>
    <p>p96</p>
    <p>p97</p>
    <p>p98</p>
    <p>p99</p>
    <p>p100</p>
    <p>p101</p>
    <p>p102</p>
    <p>p103</p>
    <p>p104</p>
    <p>p105</p>
    <p>p106</p>
    <p>p107</p>
    <p>p108</p>
    <p>p109</p>
    <p>p110</p>
    <p>p111</p>
    <p>p112</p>
    <p>p113</p>
    <p>p114</p>
    <p>p115</p>
    <p>p116</p>
    <p>p117</p>
    <p>p118</p>
    <p>p119</p>
    <p>p120</p>
    <p>p121</p>
    <p>p122</p>
    <p>p123</p>
    <p>p124</p>
    <p>p125</p>
    <p>p126</p>
    <p>p127</p>
    <p>p128</p>
    <p>p129</p>
    <p>p130</p>
    <p>p131</p>
    <p>p132</p>
    <p>p133</p>
    <p>p134</p>
    <p>p135</p>
    <p>p136</p>
    <p>p137</p>
    <p>p138</p>
    <p>p139</p>
    <p>p140</p>
    <p>p141</p>
    <p>p142</p>
    <p>p143</p>
    <p>p144</p>
    <p>p145</p>
    <p>p146</p>
    <p>p147</p>
    <p>p148</p>
    <p>p149</p>
    <p>p150</p>
</body>

</html>